<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '编辑'"
    :append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="30%"
    @click="closeDialogedit('edit')"
  >
    <el-form label-width="80px" ref="editForm" :model="dataForm" :rules="rules">
      <!-- <el-col :span="24"> -->
      <el-form-item label="用户编码" prop="userCode">
        <el-input
          size="small"
          v-model="dataForm.userCode"
          auto-complete="off"
          placeholder="请输入用户编码"
        ></el-input>
      </el-form-item>
      <!-- </el-col> -->

      <el-form-item label="用户名" prop="userName">
        <el-input
          size="small"
          v-model="dataForm.userName"
          auto-complete="off"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="密码" prop="password">
					<el-input size="small" v-model="dataForm.passWord" auto-complete="off" placeholder="请输入密码"></el-input>
				</el-form-item>
                <el-form-item label="确认密码" prop="password1">
					<el-input size="small" v-model="dataForm.password1" auto-complete="off" placeholder="请输入密码"></el-input>
				</el-form-item> -->
      <el-form-item label="手机号" prop="phone">
        <el-input
          size="small"
          v-model="dataForm.phone"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item label="性别" prop="sex">
        <el-select size="small" v-model="dataForm.sex" placeholder="请选择性别">
          <el-option label="男" value="man"></el-option>
          <el-option label="女" value="woman"></el-option>
        </el-select>
        
      </el-form-item> -->

      <el-form-item label="年龄" prop="age">
        <el-input
          size="small"
          v-model="dataForm.age"
          placeholder="请输入年龄"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input
          size="small"
          v-model="dataForm.address"
          placeholder="请输入地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="图片地址" prop="url">
        <el-input
          size="small"
          v-model="dataForm.url"
          placeholder="url"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          size="small"
          v-model="dataForm.remark"
          placeholder="备注"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input
          size="small"
          v-model="dataForm.email"
          placeholder="邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="dataForm.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="closeDialogedit()">取消</el-button>
      <el-button
        size="small"
        type="primary"
        :loading="loading"
        class="title"
        @click="submitFormEdit()"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
//import clampapi from "@/api/mes/basedata/clamp";
import { usereditid, adduser, updateuser } from "@/api/users";
export default {
  components: {},
  props: [],
  data() {
    return {
      btnLoading: false,
      loading: false,
      visible: false,
      dataForm: {
        id: "",
        userCode: "",
        userName: "",
        // passWord: undefined,
        phone: "",
        sex: "",
        age: "",
        address: "",
        url: "",
        remark: "",
        email: "",
        password1: "",
      },
      rules: {
        userCode: [
          {
            required: true,
            message: "请输入用户编码",
            trigger: "blur",
          },
        ],
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        // password: [
        // 	{
        // 		required: true,
        // 		message: '请输入密码',
        // 		trigger: 'blur'
        // 	},
        // ],
        // password1: [
        // 	{
        // 		required: true,
        // 		message: '请确认密码',
        // 		trigger: 'blur'
        // 	},
        // ],
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请输入性别",
            trigger: "blur",
          },
        ],
        age: [
          {
            required: true,
            message: "请输入年龄",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: "请输入url",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: true,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$emit("refresh");
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      console.log(this.dataForm.id);
      this.$nextTick(() => {
        this.$refs["editForm"].resetFields();
        if (this.dataForm.id) {
          //调用数据回显的方法
          usereditid(this.dataForm.id).then((res) => {
            console.log(res.list[0]);
            this.dataForm = res.list[0];
          });
          // clampapi.getclampInfo(this.dataForm.id).then(res => {
          // 	this.dataForm = res.data;
          // })
        }
      });
    },
    submitFormEdit() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          console.log("验证通过调用保存方法");
          this.btnLoading = true;
          const formMethod = !this.dataForm.id ? adduser : updateuser;
          console.log(this.dataForm.id);
          console.log(this.dataForm);
          console.log(this.formMethod);
          formMethod(this.dataForm)
            .then((res) => {
              console.log(res);
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.btnLoading = false;
                  this.visible = false;
                  (this.visible = false), this.$emit("refresh", true);
                },
              });
            })
            .catch((res) => {
              this.btnLoading = false;
            });
        }
      });
    },
    closeDialogedit() {
      console.log("取消");
      this.visible = false;
    },
  },
};
</script>